<template>
     <h3>面试题主分类</h3>
     <!-- 表单 -->
     <div class="category-form">
         <div class="opt">
             <!-- 上传文件组件 -->
             <el-upload class="avatar-uploader" drag action="#" :on-change="chooseImageFn" :auto-upload="false"
                 :show-file-list="false">
                 <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                 <el-icon v-else class="avatar-uploader-icon">
                     <Plus />
                 </el-icon>
             </el-upload>
             <div v-if="imageUrl" style="width: 178px; text-align: center; margin-top: 5px">
                 <el-button @click="photoDeleteFn(imageUrl)" type="danger" plain>删除图片</el-button>
             </div>
         </div>
 
         <div class="opt">
             <el-input v-model="input" style="width: 360px; height: 44px; font-size: 16px" placeholder="面试题主分类名称" />
         </div>
 
         <div class="opt">
             <el-button @click="addCategoryFn" type="primary" size="large">添加面试题主分类</el-button>
         </div>
     </div>
 
     <!-- 表格 -->
     <div class="category-table" style="margin-top: 15px;">
         <el-table :data="tableData" stripe style="width: 100%">
             <el-table-column prop="index" label="序号" width="90" />
             <el-table-column prop="category_text" label="分类名称" width="180" />
             <el-table-column label="图标" width="180">
                 <template #default="scope">
                     <!-- scope.row.name -->
                     <img style="width: 60px;" v-if="scope.row.category_icon" :src="scope.row.category_icon" alt="">
                 </template>
             </el-table-column>
             <el-table-column label="操作">
                 <template #default="scope">
                     <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                         删除
                     </el-button>
                 </template>
             </el-table-column>
         </el-table>
     </div>
 </template>
 
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { photoUpload, photoDelete, addInterviewCategory, listInterviewCategory, removeInterviewCategory } from '../../api/request'
 import { ElMessage, ElMessageBox } from 'element-plus';
 import type { Action } from 'element-plus'
 import api from '../../api/index'
 const input = ref('')
 const imageUrl = ref('')
 const pic = ref('')
 // 选择图标
 const chooseImageFn = async (file: any) => {
     if (file) {
         // 创建表单实例
         let fd = new FormData()
         fd.append('photo', file.raw) // 把图片信息传递给服务器 ，服务器存储好图片，再返回一个图片路径
         // 调用上传图片的方法
         await photoUpload(fd)
             .then(
                 content => {
                     console.log("图片路径:",content)
                     let { code, picUrl } = content;
                     if (code == 200) {
                         // 赋值（响应式）
                         imageUrl.value = api.url + picUrl;
                         pic.value = picUrl;
                     }
                     else {
                         ElMessage.error(content.msg);
                     }
                 }
             )
     }
 
 }
 // 删除图片
 const photoDeleteFn = async (picUrl: string) => {
     await photoDelete({ picUrl })
         .then(
             content => {
                 // console.log(content);
                 let { code } = content;
                 if (code == 200) {
                     // 重置图片路径
                     imageUrl.value = "";
                 }
             }
         )
 }
 
 // 添加面试题主分类
 const addCategoryFn = async () => {
     let text = input.value;
     let icon = pic.value;
     if (text == '' || icon == '') {
         ElMessage.error("缺少参数，请检查再提交");
         return false;
     }
     await addInterviewCategory({ category_text: text, category_icon:icon })
         .then(
             content => {
                 // console.log(content)
                 let { code, msg } = content;
                 // 添加分类名称成功
                 if (code == 200) {
                     ElMessage.success(msg);
                     // 重置表单
                     input.value = "";
                     imageUrl.value = "";
                     pic.value = "";
                     // 重新获取列表
                     getCategoryListFn();
                 }
                 else {
                     ElMessage.error(msg)
                 }
             }
         )
 }
 
 // 表格数据
 const tableData = ref<any>([])
 // 点击删除面试题主分类
 const handleDelete = (index: number, row: any) => {
     // console.log(index, row)
     // 获取当前点击的选项
     let { category_id, category_icon, category_text } = row;
     ElMessageBox.confirm(
         `是否删除这个“${category_text}”面试题主分类?`,
         '警告',
         {
             distinguishCancelAndClose: true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
         }
     )
         .then(async () => {
             // console.log("点击确定")
             // 删除面试题主分类
             await removeInterviewCategory({ category_id })
                 .then(
                     content => {
                         let { code, msg } = content;
                         if (code != 200) {
                             ElMessage.error(msg)
                         }
                     }
                 )

             // 删除程序中数组对应的数据
             tableData.value.splice(index, 1);

             if(category_icon.length != 0) {
               // 删除分类对应的图片
               await photoDelete({ picUrl: category_icon })
                    .then(
                         content => {
                              // console.log(content);
                              let { code, msg } = content;
                              if (code != 200) {
                              ElMessage.error(msg)
                              }
                         }
                    )
               }
         })
         .catch((action: Action) => {
             // console.log("点击取消")
         })
 
 }
 // 定义每一项数据的属性类型
 type Item = {
     id: string
     category_text: string
     category_icon: string
     index?: string | number
 }
 // 获取面试题主分类列表
 const getCategoryListFn = async () => {

     await listInterviewCategory()
         .then(
             content => {
                 // console.log(content)
                 let { code, result } = content;
                 if (code == 200) {
                     // 整合后台数据
                     let arr = result.map((item: Item, index: number) => {
                         item.index = index + 1;
                         item.category_icon = api.url + item.category_icon
                         return item;
                     })
                     tableData.value = arr;
                 }
             }
         )
 }
 getCategoryListFn();
 

 </script>
 





 <style lang="scss">
 .category-form {
     .opt {
         margin-top: 15px;
     }
 
 }
 
 .avatar-uploader-icon,
 .el-upload-dragger,
 .avatar-uploader,
 .avatar {
     width: 178px;
     height: 178px;
     display: block;
     padding: 0 !important;
 }
 
 .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 178px;
     height: 178px;
     text-align: center;
     padding: 0 !important;
     line-height: 178px;
 }
 </style>